<template>
  <el-timeline v-if="activities.length">
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :timestamp="activity.createTime || ''"
      :color="activity.color"
      placement="top"
    >
      <el-tooltip placement="left" :visible-arrow="false">
        <div slot="content">
          处理人:{{ activity.handleUserName }}
          <br />
          处理意见:{{ activity.opinion }}
        </div>
        <p>
          <el-tag v-if="activity.handleUserName" size="small">{{
            activity.handleUserName
          }}</el-tag
          >{{ activity.phaseName }}
        </p>
      </el-tooltip>
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import { nodesHandle } from '@/api/xd/documentFlow'
export default {
  props: ['TimelineData'],
  data() {
    return {
      activities: [],
      status: '',
      flowStatusOptions: [],
      type: 0
    }
  },

  watch: {
    TimelineData(data) {
      this.getNodeShanDle(data.documentFlowId)
      this.status = data.status.phase
      this.flowStatusOptions = data.flowStatusOptions
    }
  },
  mounted() {
    if (!this.activities) {
      this.getNodeShanDle(this.$route.query.documentFlowId)
    }
  },
  beforeUpdate() {},
  methods: {
    // 时间线
    async getNodeShanDle(id) {
      var keys = ''
      var INDEX = ''
      var phase = ''
      if (this.type == 0) {
        const { data } = await nodesHandle({
          documentFlowId: id
        })
        // this.type = 1
        // 时间线叠加
        this.activities = data || []
        if (this.activities.length > 0) {
          phase = this.activities[this.activities.length - 1].phase
          this.flowStatusOptions.forEach((e, index) => {
            if (e.phase === phase) {
              INDEX = index
            }
          })
          const newList = this.flowStatusOptions.slice(INDEX + 1)
          this.activities = [...this.activities, ...newList]
          // for (index; index < this.flowStatusOptions.length + 1; index++) {
          //   // console.log(index,'sjsjsjsjsjjs',this.activities,this.flowStatusOptions);
          //   if (this.flowStatusOptions[index]) {
          //     this.activities = [
          //       ...this.activities,
          //       this.flowStatusOptions[index]
          //     ]
          //   }
          // }
        } else {
          this.activities = this.flowStatusOptions
        }
        // 替换时间线颜色
        this.activities.forEach((item, index) => {
          if (item.result == 1) {
            item.color = '#0a0'
          } else if (item.result == 2) {
            item.color = '#f57171'
          }
        })
        this.activities.forEach((item, index) => {
          if (item.phase == this.status) {
            keys = index
          }
        })
        if (keys) {
          this.activities[keys].color = '#adaaa5'
        }
      } else {
        return
      }
    }
  }
}
</script>

<style scoped>
.el-timeline {
  overflow: auto;
  height: 80vh;
}
</style>
